<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="index.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div class="header">
        <div class="logo">
            <img class="restaurant-logo" src="./images/Logo.png" alt="Logo.png">
            <p class="restaurant-title">Gratia</p>
        </div>
        <div class="navigation">           
            <a href="#About">About</a>
            <a href="#Menu">Menu</a>
            <a href="#Callery">Callery</a>
            <a href="#Contact">Contact</a>            
        </div>
    </div>
    <div class="title">
        <p class="background-title">MENU</p>
        <p class="desc">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
    </div>
    <div class="gallery">
        <div class="gallery-box">
			<img src="./images/Main Dishes.png" alt="Main Dishes">
			<div>
				<h1>MAIN DISHES</h1>
            </div>
            <hr width="30px" color="#e7e7e7">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
		<div class="gallery-box">
			<img src="./images/Soups.png" alt="Soups">
			<div>
				<h1>SOUPS</h1>
            </div>
            <hr width="30px" color="#e7e7e7">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
		<div class="gallery-box">
			<img src="./images/Hamburgers.png" alt="Hamburgers">
			<div>
				<h1>HAMBURGERS</h1>
            </div>
            <hr width="30px" color="#e7e7e7">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
		<div class="gallery-box">
			<img src="./images/Desserts.png" alt="Desserts">
			<div>
				<h1>DESSERTS</h1>
            </div>
            <hr width="30px" color="#e7e7e7">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
		<div class="gallery-box">
			<img src="./images/Barbecue.png" alt="Barbecue">
			<div>
				<h1>BARBECUE</h1>
            </div>
            <hr width="30px" color="#e7e7e7">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
		<div class="gallery-box">
			<img src="./images/Salads.png" alt="Salads">
			<div>
				<h1>SALADS</h1>
            </div>
            <hr width="30px" color="#e7e7e7">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>
    </div>
    <div class="footer">        
	  <div class="footer-logo">
        <img src="./images/Logo.png" alt="Logo">
	    <p class="footer-logo-title">Gratia Restaurant</p>
	    <p class="footer-logo-desc">Copyright 2016. All rights reserved by symu</p>
	  </div>
	  <hr width="100px" color="#e7e7e7">
	  <div class="footer-button">
		<a href="http://www.facebook.com" target="_blank"><img src="./images/FB.png" alt="facebook"></a>
		<a href="http://www.twitter.com" target="_blank"><img src="./images/TR.png" alt="twitter"></a>
		<a href="http://www.instagram.com" target="_blank"><img src="./images/IG.png" alt="instagram"></a>
	  </div>
    </div>
</body>

</html>